<!DOCTYPE html>
<html lang="en">
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>演示系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js" type="application/javascript"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/community.css">
    <link rel="stylesheet" href="css/buttonStyle.css">
</head>

<body style="background: url(image/bg-ssss.jpg) ">
<!--导航栏部分-->
<div th:fragment="nav">

    <nav class="navbar navbar-default" style="background-color: #ffffff">
        <div class="container-fluid" style="background-color: #ffffff">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a href="UI1.1.html" class="navbar-brand"
                   style="color: #074193"><b>非平稳环境下基于高斯过程机器学习的动态波束快速追踪演示系统</b></a>
            </div>

            <ul class="nav navbar-nav navbar-left">
                <li>
                    <a href="UI1.1.html" style="color: #074193">首页</a>
                </li>
                <!--                <li>-->
                <!--                    <a href="system.html" style="color: #074193">历史数据</a>-->
                <!--                </li>-->
                <li>
                    <a href="us.html" style="color: #074193">关于我们</a>
                </li>
            </ul>


            <ul class="nav navbar-nav navbar-right">
                <!--                        这地方显示个时间-->
                <a href="index.html" calss="image fit">
                    <img src="image/buptlogo.jpg" height="48" width="165"/>
                </a>

            </ul>
        </div><!-- /.navbar-collapse -->
        <!-- /.container-fluid -->
    </nav>
</div>


<!--<div class="container-fluid main" >-->
<!--    <div class="row" style="background: url(image/bg-ssss.jpg) ">-->

<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" style="display:inline;"><!--这是左侧的-->
    <p style="color: #000000; font-size:22px"><b>
            <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
            研究背景
        </b></p>
    <p style="color: mediumblue; font-size:20px">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无人机在农业、救灾以及军事等领域得到广泛的关注和应用。无人机网络技术研究是无人机高效协作、实现群体智能化的基础。
        无人机群高速率运动，网络拓扑非平稳变化，如何快速、有效设计波束追踪方案，实现无人机网络高效通信是一个重要研究问题。
        <br>
    </p>


    <!--    <p style="color: #000000; font-size:22px"><b>-->
    <!--        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>-->
    <!--        解决思路-->
    <!--    </b></p>-->
    <!--    <p style="color: mediumblue; font-size:20px">-->
    <!--        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.建立基于高斯过程机器学习的无人机位置预测模型，追踪并预测无人机活动区域-->
    <!--    </p>-->
    <!--    <p style="color: mediumblue; font-size:20px">-->
    <!--        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2. 波束追踪限定在预测的无人机活动区域，实现快速有效追踪-->
    <!--    </p>-->


    <p style="text-align: center;">
        <img id="uav_img" src="image/u2.png" height=auto width=100%/>
    </p>

    <p style="text-align: center;color: #000000; font-size:20px">
        <!--        <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>-->
        <b>无人机波束追踪示意图</b>
    </p>


</div>

<!--中间部分-->
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" style="display:inline;">
    <p style="color: #000000; font-size:22px"><b>
            <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
            系统架构
        </b></p>
    <p style="color: mediumblue; font-size:20px">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基于数据/模型协同驱动思想，设计了基于高斯过程的无人机轨迹预测方案，以及波束追踪模型。二者协同驱动，从而实现波束快速追踪。
        <br><br><br><br>
    </p>

    <p style="text-align: center;">
        <img src="image/p2.png" height=auto width=105%/>

    </p>
    <div style="text-align: center;color: #000000; font-size:20px">
        <!--        <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>-->
        <b>算法流程图</b>
    </div>
    <!--    <p style="text-align: center;">-->
    <!--        <img src="image/p1.png" height=auto width=100%/>-->
    <!--    </p>-->
    <!--    <div style="text-align: center;color: #000000; font-size:20px">-->
    <!--        &lt;!&ndash;        <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>&ndash;&gt;-->
    <!--        <b>第二张图</b>-->
    <!--    </div>-->
</div>


<!--右边部分-->
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" style="display:inline;">
    <p style="color: #000000; font-size:22px"><b>
            <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
            数据仿真
        </b></p>
    <form action="index.php" accept-charset="UTF-8" method="post">
        <div id="tijiao" style="margin-left: 10px">
            <div style="display: flex; width: 100%">
                <div>
                    <label for="UAV_num" id="UAV_num_str">无人机数目:2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                </div>
                <div>
                    <input type="range" name="UAV_num" id="UAV_num" style="width: 200%" min="2" max="8" step="2"
                           oninput="getVal_UAV_num()">
                </div>
            </div>
            <div style="display: flex; width: 100%">
                <div>
                    <label for="SNR" id="SNR_str">信噪比(dB):0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                </div>
                <div>
                    <input type="range" name="SNR" id="SNR" style="width: 200%" min="0" max="15" step="5"
                           oninput="getVal_SNR()">
                </div>
            </div>
            <div style="display: flex; width: 100%">
                <div>
                    <label for="slot_num" id="slot_num_str">发送帧数目:60&nbsp;&nbsp;&nbsp;&nbsp;</label>
                </div>
                <div>
                    <input type="range" name="slot_num" id="slot_num" style="width: 200%" min="60" max="80" step="10"
                           oninput="getVal()">
                </div>
            </div>
            <input type='submit' id="submit_command" class="button1" onclick="clear1()" value=" 确认并运行 ">
            <input type="button" class="button1" onclick="start_fig2()" value=" 查看历史数据 ">
    </form>
    <br>
    <span>传统方案:</span>
    <label id="avrg">0.00</label>
    <span>    bps/Hz</span>
    <span>数据驱动方案:</span>
    <label id="avrg2">0.00</label>
    <span>    bps/Hz</span>
    <span>性能提升:</span>
    <label id="cha">0.00</label>
    <span>    %</span>
</div>
<div id="main" style="height:470px;width:100%;border:1px solid #ccc;padding:10px;"></div>
</div>

<!--    </div>-->
<!--</div>-->
<!--<div class="copyright">-->
<!--    <p>&nbsp;</p>-->
<!--    <p style="text-align: center; color: rgb(0, 0, 0); font-size: 14px;">-->
<!--        <span class="glyphicon glyphicon-home" aria-hidden="true"></span>-->
<!--        北京邮电大学-->
<!--        <span style="padding: 0px 18px;">|</span>-->
<!--        <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>-->
<!--        &nbsp;地址:北京市海淀区西土城路10号 &nbsp;-->
<!--        <span style="padding: 0px 18px;">|</span>-->
<!--        <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>-->
<!--        &nbsp;邮编:100876 &nbsp;-->
<!--    </p>-->
<!--</div>-->


<script src="js/echarts-all.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var flag = 0;
    var int;
    var UAV_num;
    var SNR;
    var slot_num = 0;
    var slot_int = 0;
    var nums = [];
    var nums2 = [];
    var numsPrevious = [];
    var nums2Previous = [];

    let str4 = fileOpen2("txtFile/getCommand.txt");
    let strings4 = str4.split(";");
    let command2 = [];
    strings4.forEach(items => {
        command2.push(+items);
    })
    let uav_img_num = command2[0];
    let slot_img_num = command2[2];
    let SNR_img_num = command2[1];
    document.getElementById('UAV_num').value = uav_img_num;
    document.getElementById('slot_num').value = slot_img_num;
    document.getElementById('SNR').value = SNR_img_num;
    getVal();
    getVal_SNR();
    getVal_UAV_num();

    function fileOpen2(name) {
        let xhr = new XMLHttpRequest(),
            okStatus = document.location.protocol === "file:" ? 0 : 200;
        xhr.open('GET', name, false);
        xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8
        xhr.send(null);
        return xhr.status === okStatus ? xhr.responseText : null;
    }

    function start_fig() {
        clear1();
        int = setInterval("test()", 50);
    }

    function start_fig2() {
        UAV_num = document.getElementById("UAV_num").value;
        SNR = document.getElementById("SNR").value;
        slot_num = document.getElementById("slot_num").value;
        console.log(UAV_num, SNR, slot_num);
        test2(UAV_num, SNR, slot_num, 0);
    }

    function test() {
        let str = fileOpen2("txtFile/buffer.txt");
        let str2 = fileOpen2("txtFile/buffer2.txt");
        let str3 = fileOpen2("txtFile/getCommand.txt")
        let labelNum = [];
        nums = [];
        nums2 = [];
        let command = [];
        let strings = str.split(";");
        strings.forEach(items => {
            nums.push(+items);
        })
        let strings2 = str2.split(";");
        strings2.forEach(items => {
            nums2.push(+items);
        })
        let strings3 = str3.split(";");
        strings3.forEach(items => {
            command.push(+items);
        })
        let slot_num_str = command[2];
        if (slot_num_str === "NULL") {
            alert("未设定参数或MATLAB未启动，暂不能运行！");
            location.href = "index.php";
        } else {
            slot_num = parseInt(slot_num_str);
            var l1 = 0;
            var l2 = 0;
            var l3 = 0;
            var l4 = 0;
            l1 = nums.length;
            l2 = numsPrevious.length;
            l3 = nums2.length;
            l4 = nums2Previous.length;
            console.log(l1, l2)
            console.log(l3, l4)
            if ((l1 > l2) && (l3 > l4) && (l1 === l3)) {
                let nums_temp = nums.splice(0, nums.length - 1);
                let nums2_temp = nums2.splice(0, nums2.length - 1);
                for (let i = 1; i < l1 - 1; i++) {
                    let str = String(i);
                    labelNum.push(+str);
                }
                setValue2(labelNum.slice(0, l1 - 2), nums_temp.slice(0, l1 - 2), nums2_temp.slice(0, l3 - 2), UAV_num, SNR, slot_num);
                for (let j = 0; j < l1; j++) {
                    numsPrevious[j] = nums[j];
                    nums2Previous[j] = nums2[j];
                }
            }
            if ((l1 - 1) === slot_num) {
                int = clearInterval(int);
                numsPrevious = [];
                nums2Previous = [];
            }
        }
    }

    function test2(UAV_num, SNR, slot_num, pose) {
        let str = fileOpen2("txtFile/" + UAV_num + "-" + SNR + "-" + slot_num + "-" + pose + ".txt");
        var strings = [];
        var nums = [];
        var labelNum = [];
        strings = str.split(";");
        strings.forEach(items => {
            nums.push(+items);
        })
        nums = nums.splice(0, nums.length - 1);
        slot_int = parseInt(slot_num);
        for (let i = 1; i < slot_int + 1; i++) {
            let str = String(i);
            labelNum.push(+str);
        }
        pose = pose + 1;
        let str2 = fileOpen2("txtFile/" + UAV_num + "-" + SNR + "-" + slot_num + "-" + pose + ".txt");
        var strings2 = [];
        var nums2 = [];
        strings2 = str2.split(";");
        strings2.forEach(items => {
            nums2.push(+items);
        })
        nums2 = nums2.splice(0, nums2.length - 1);
        setValue(labelNum.slice(0, slot_num-1), nums.slice(0, slot_num-1), nums2.slice(0, slot_num-1));
    }

    function setValue(labelNumber, number, number2) {
        myChart.setOption({
            title: {
                text: "UAV：" + UAV_num + "；SNR：" + SNR + "；SLOTS：" + slot_num,
                textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                    fontSize: 15,
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: [{
                left: "right",
                padding: [30, 0, 0, 0]
            }],
            xAxis: [
                {
                    type: 'category',
                    // min:0,
                    // max:90,
                    data: labelNumber
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitArea: {show: true}
                }
            ],
            series: [
                {
                    name: '传统方案',
                    type: 'line',
                    color: 'red',
                    data: number
                }, {
                    name: '数据驱动方案',
                    type: 'line',
                    color: 'green',
                    data: number2
                }
            ]
        });
        let num_array = number.map(Number);
        let num2_array = number2.map(Number);
        let sum = 0;
        let sum2 = 0;
        let len = num_array.length
        for (let i = 0; i < len; i++) {
            sum += num_array[i];
            sum2 += num2_array[i];
        }
        sum = sum / len;
        sum2 = sum2 / len;
        // 改数
        document.getElementById("avrg").innerHTML = String(sum).slice(0,4);
        document.getElementById("avrg2").innerHTML = String(sum2).slice(0,4);
        document.getElementById("cha").innerHTML = String((sum2 - sum) / sum).slice(0,4);
    }

    function setValue2(labelNumber, number, number2, uav_num, SNR, slot_num) {
        myChart.setOption({
            title: {
                text: "UAV：" + uav_num + "；SNR：" + SNR + "；SLOTS：" + slot_num,
                textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                    fontSize: 15,
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: [{
                left: "right",
                padding: [30, 0, 0, 0]
            }],
            xAxis: [
                {
                    type: 'category',
                    // min:0,
                    // max:90,
                    data: labelNumber
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitArea: {show: true}
                }
            ],
            series: [
                {
                    name: '传统方案',
                    type: 'line',
                    color: 'red',
                    data: number
                }, {
                    name: '二方案',
                    type: 'line',
                    color: 'green',
                    data: number2
                }
            ]
        });
        let num_array = number.map(Number);
        let num2_array = number2.map(Number);
        let sum = 0;
        let sum2 = 0;
        let len = num_array.length
        for (let i = 0; i < len; i++) {
            sum += num_array[i];
            sum2 += num2_array[i];
        }
        sum = sum / len;
        sum2 = sum2 / len;
        // 改数
        document.getElementById("avrg").innerHTML = String(sum).slice(0,4);
        document.getElementById("avrg2").innerHTML = String(sum2).slice(0,4);
        document.getElementById("cha").innerHTML = String((sum2 - sum) / sum).slice(0,4);
    }

    function clear1() {
        myChart.clear();
    }

    function getVal() {
        document.getElementById('slot_num_str').innerHTML = "发送帧数目:" + document.getElementById('slot_num').value + "&nbsp;&nbsp;&nbsp;&nbsp;";
    }

    function getVal_UAV_num() {
        document.getElementById('UAV_num_str').innerHTML = "无人机数目:" + document.getElementById('UAV_num').value + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        document.getElementById('uav_img').src = "image/u" + document.getElementById('UAV_num').value + ".png";
    }

    function getVal_SNR() {

        let getnum = parseInt(document.getElementById('SNR').value);
        if (getnum < 9) {
            document.getElementById('SNR_str').innerHTML = "信噪比(dB):" + document.getElementById('SNR').value + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        } else {
            document.getElementById('SNR_str').innerHTML = "信噪比(dB):" + document.getElementById('SNR').value + "&nbsp;&nbsp;&nbsp;&nbsp;";
        }
    }
</script>

</html>

<?php
$UAV_num = $_POST["UAV_num"];
$SNR = $_POST["SNR"];
$slot_num = $_POST["slot_num"];
$myfile = fopen("txtFile\\getCommand.txt", "w") or die("Unable to open this fucking file!");
$txt = $UAV_num.";".$SNR.";".$slot_num;
fwrite($myfile, $txt);
fclose($myfile);
?>